<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<base href="<%=basePath%>">

<title>账户设置</title>
<script src="jquery/js/jquery-1.8.2.js"></script>
<script src="jquery/js/jquery-ui-1.9.0.custom.min.js"></script>
<link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.9.0.custom.min.css" />
<link rel="stylesheet" href="css/xixiaoming/imgareaselect/imgareaselect-default.css"/>
<link href="css/shoppingCarAndMyCustom.css" type="text/css" rel="stylesheet" />
<link href="css/login.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/myCustonAndShoppingCar/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/myCustonAndShoppingCar/updateCustomer.js"></script>
<script type="text/javascript" src="js/address.js"></script>

<script type="text/javascript" src="js/myCustonAndShoppingCar/bgiframe.js"></script>
<script type="text/javascript" src="js/myCustonAndShoppingCar/weebox.js"></script>
<link type="text/css" rel="stylesheet" href="css/xixiaoming/weebox.css" />

<style type="text/css">
li {
	font-size: 12px;
	font-family: inherit;
	margin-bottom: 20px;
	line-height: 18px;
	color: #424243;
	margin-left: 22px;
	background-position: 3px -289px;
}

.div_left {
	clear: both;
	width: 350px;
	padding: 14px 0 9px 8px;
	border: 1px solid #D3DCE5;
	background: none repeat scroll 0 0 #F3F5FD;
	display: none;
	overflow: hidden;
}

.li_top {
	float: left;
	border-color: #D3DCE5;
	line-height: 30px;
	background-color: #F8F8F8;
	padding: 0px;
}
.li_top:hover {
	background-color: #F1FAFD;
}

.denglu a{background-image:url("thirdparty/denglu_icon5_all_bg.png");font-size:27px;}
.denglu .qzone{background-position:0px -300px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .renren{background-position:0px -180px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .baidu{background-position:0px -450px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .sina{background-position:0px -60px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .tencent{background-position:0px -90px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .qzone{background-position:0px -300px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .qzone{background-position:0px -300px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .qzone{background-position:0px -300px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .taobao{background-position:0px -360px;width: 24px;height:24px;background-repeat:no-repeat;}
.denglu .douban{background-position:0px -240px;width: 24px;height:24px;background-repeat:no-repeat;}
</style>
<script type="text/javascript">
function accRel() {
	$("#accRel").show();
	$("#accRel").siblings().hide();
	$("div[class='imgareaselect-outer']").hide();
	$("div[class='imgareaselect-selection']").parent().hide();
	$("#3").css("background-color","#F1FACD");
	$("#3").siblings().css("background-color","#F8F8F8");

	var d = $("#accRel");
	var html = "<div id=thirdparty>";
	$.getJSON("getThirdPartyByUsername",
		function(data) {
		   $.each(data.thirdpartys,function(i,v){
		     html = html+"<ul style=list-style:none><li id=l"+v.id+"><img src=thirdparty/"
		     +v.img+" alt="+v.name+" />"
		     +v.name+"<input type=button value=删除  onclick=deleteThird("+
		     +v.id+") /></li></ul>";
		   });
		   html = html+"</div>";
		   $("#thirdparty").html(html);
		});
}
function add(){
	if($("#addbtn").attr("value")=='+'){
         $("#denglu").css("display","block");
         $("#addbtn").attr("value","-")
	}else{
	     $("#denglu").css("display","none");
	     $("#addbtn").attr("value","+")
	}

}

function deleteThird(id){
var r=confirm("您确认要删除吗？");
if (r==true)
  {
  $.post("deleteThirdPartyJson",{"id":id},function(data){
     accRel();
  });
  }
else
  {

  }


}
function addThird(id){
  var openId = $("#thirdId").val();
  $.post("checkThirdPartyJson",{"openid":openId},function(data){
     if(data.msg=='true'){
        alert("第三方账号已被绑定");
     }else{
       $.post("addThirdPartyJson",{"thirdpartyId":openId,"thirdTypeId":id},function(data){
       accRel();
       $("#thirdLogin").html("");
         });
     }
  });
}

$().ready(function(){
     if($("#thirdId").val()!=''){
       accRel();

     }
  });
</script>
</head>
<body
	onload="loadData('selProvance','selCity','selArea');setArea('${cus.userProvince}','${cus.userCity}','${cus.userArea}');">
	<jsp:include page="top.jsp"></jsp:include>
	<input type="hidden" value="${name }" id="name"/>
	<br />

	<div>
		<div style="float:left;margin-left:426px;">
			<div>
				<ul
					style="list-style-type:none;border-bottom:0px;zoom:1">
					<li class="li_top" style="margin-left:-47px;" onclick="baseMsg()" id="1">基本信息</li>
					<li class="li_top" onclick="loveCarMsg()" id="5">爱车信息</li>
					<li class="li_top" onclick="changePsw()" id="2">修改密码</li>
					<li class="li_top" onclick="accFace()" id="6">头像修改</li>
					<li class="li_top" onclick="accRel()" id="3">帐号关联</li>
					<li class="li_top" onclick="accSafe()" id="4" >账号安全</li>
				</ul>
			</div>
			<div id="contentbody">
			<!-- 基本信息 -->
			<div id="baseMessage"
				style="clear:both;width:350px;padding:14px 0 9px 8px;border:1px solid #D3DCE5;background:none repeat scroll 0 0 #F3F5FD;">
				<form id="form1" name="form1" method="post" target="baseMessageiframe" action="update.action">
					<input type="hidden" name="userid" id="hiddenuserid" value="${cus.userId}">
					<iframe id="baseMessageiframe" style="display:none" name="baseMessageiframe"></iframe>
					<table>
						<tr>
							<td colspan="2"><s:actionerror /> <s:actionmessage />
							</td>
						</tr>
						<tr>
							<td align="right">&nbsp;&nbsp;真实姓名：</td><td align="left"><input type="text" name="realname"
								id="realname" value="${cus.userRealName}">
							</td>
						</tr>
						<tr>
							<td align="right">&nbsp;&nbsp;性别：</td><td align="left"><c:if
									test="${cus.userSex=='男'||cus.userSex==null}">
									<input type="radio" name="sex" value="男" checked="checked">男
        <input type="radio" name="sex" value="女">女<br />
								</c:if> <c:if test="${cus.userSex=='女'}">
									<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女" checked="checked">女<br />
								</c:if>
							</td>
						</tr>
						<tr>
							<td align="right">&nbsp;&nbsp;居住地：</td>
							<td align="left"><select style="float:left;width:60px"
											id="selProvance" name="provaice"
											onchange="chgProvinces('selProvance','selCity','selArea')"></select>
											<select style="margin-left: 10px;width:60px; float: left;"
											id="selCity" name="city"
											onchange="chgCitys('selCity','selArea')"></select> <select
											id="selArea" name="area"
											style="margin-left: 10px;width:60px; float: left;"></select></td>
						</tr>
						<tr>
							<td align="right">&nbsp;&nbsp;详细地址：</td><td align="left"><input type="text" name="address"
								id="address" value="${cus.userAddress}" style="width:202px">
							</td>
						</tr>
						<tr>
							<td align="right">&nbsp;&nbsp;手机号码：</td><td align="left"><input type="text" id="telephone"
								name="telphone" value="${cus.userMobilePhone}"
								style="width:202px" onblur="checkMobile()" />
							</td>
						</tr>
						<tr>
							<td align="right">&nbsp;&nbsp;电话号码：</td><td align="left"><input type="text" style="width:40px;"
								onblur="checkPhone()" id="specialplane1" name="phone1"
								value="${tele1}" />-<input type="text" onblur="checkPhone()"
								name="phone2" id="specialplane2" value="${tele2}" style="width:100px;"/> <font
								id="specialplaneMsg"></font>
							</td>
						</tr>
						<tr>
							<td colspan="2" align="left">
								&nbsp;&nbsp;个性签名：</td>
						</tr>
						<tr><td colspan="2" align="left"><textarea name="personalSign" rows="2" cols="32px" style="margin-left:14px;">${uhot.userPersonalSign}</textarea></td></tr>
						<tr>
							<td colspan="2">&nbsp;&nbsp; <input type="reset" class="buttoncss" value="重置"> <input
								type="button" value="提交" class="buttoncss" onclick="checkSubmit()" />
							</td>
						</tr>
					</table>
				</form>
			</div>
			<!-- 密码修改 -->
			<div id="changePsw" class="div_left">
				输入原密码：<input type="password" onblur="checkOldPass()"
					id="oldpassword" value="" /> <br />输入新密码：<input type="password"
					id="p1" onblur="checkPass1()" value="" /><br /> 再输入密码：<input
					type="password" id="p2" onblur="checkPass2()" value="" /><br /> <input
					type="button" value="确定修改" onclick="changePassword()" /> <input
					type="button" value="清空" onclick="clearPassword()" />
			</div>
				<div id="accRel" class="div_left">
				    <div id="thirdparty" style="text-align: left">

				    </div>
				    <div style="text-align: left;">
				    <input type="button" id="addbtn" value="+" onclick="add()"/>
				    <div id="thirdLogin" style="display:${thirdTypeId!=null?'block':'none'}">
				    	<font color="red">${screenName}</font>
				    	<img alt="" src="${imgSrc}">
				    	<input type="button" value="添加" onclick="addThird(${thirdTypeId})">
				    	<input type="hidden" value="${openid}" id="thirdId"/>
				    </div>
				    <div style="display: none" id="denglu">
					<p class="denglu" style="margin-left:0px;">第三方登录：
		<a class="tencent" href="http://open.denglu.cc/transfer/tencent?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24"  title="腾讯微博"/></a>
		<a class="qzone" href="http://open.denglu.cc/transfer/qzone?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24" title="腾讯QQ"/></a>
		<a class="sina" href="http://open.denglu.cc/transfer/sina?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24" title="新浪微博"/></a>
		<a class="renren" href="http://open.denglu.cc/transfer/renren?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24" title="人人网"/></a>
		<a class="taobao" href="http://open.denglu.cc/transfer/taobao?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24" title="淘宝网"/></a>
		<a class="douban" href="http://open.denglu.cc/transfer/douban?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24" title="豆瓣网"/></a>
		<a class="baidu" href="http://open.denglu.cc/transfer/baidu?appid=52646&redirect_uri=http%3A%2F%2Fwww.webbei.com%2FGotoupdate">
		<img src="images/png/400300.png" height="24" width="24" title="百度连接"/></a>
		</p>

					</div>
					</div>
				</div>
			<!-- 帐号安全 -->
			<div id="accSafe" class="div_left">
				<!-- 2种情况2选1 -->
				<!-- 邮箱验证过 -->
				<div style="float:left" id="showsafeemail">安全邮箱：${cus.userMail }</div>
				<div style="float:right">
					<input type="button" value="修改" id="emailchangexx" onclick="editemail();" />
				</div>
				<!-- 邮箱没有验证过 -->
				<%-- <div style="float:left" id="showsafeemail">未验证邮箱：${cus.userMail }</div>
				<div style="float:right">
					<input type="button" value="验证邮箱" id="emailchangexx" onclick="checkEmailAtCustomerEdit();" />
				</div> --%>

				<div style="display:none;margin-top:50px;" id="hiddenemailinput">
					请输入您的邮箱：<input id="inputEmail" type="text" value=""/>
				</div>
			</div>
			<!-- 爱车信息 -->
			<div id="lcar" class="div_left" style="font-size:20px;margin-left:58px;width:245px;"></div>
			<!-- 头像修改 -->
			<div id="lface" class="div_left" style="font-size:20px;margin-left:0px;width:388px;padding-left:0px;text-align:left;">
				<font style="font-size:15;">当前头像：</font><br/>
				<img src="${cus.userFace}" style="height:80px;"><br/>
				<font style="font-size:15;">设置新头像：</font>
				<form id="faceUploadForm" name="faceUploadForm" encType="multipart/form-data" method="post" target="upload-target" action="faceUpload.action">
					<input type="file" name="faceUpload" id="faceUpload" onchange="document.getElementById('faceUploadForm').submit();"/>
					<iframe id="upload-target" style="display:none" name="upload-target"></iframe>
				</form>
				<img src="" id="imagetest" style="margin-left:25px;display:none" width="300px"/>
				<input type="button" value="保存图片" onclick="saveSelected();" class="buttoncss"/>
			</div>
			</div>
		</div>
		<div style="float:left;margin-left:30px;">
			<div style="height:50px"></div>
			<div
				style="background:none repeat scroll 0 0 #F3F5FD;margin-bottom:9px;padding:2px;position:relative;">
				<div style="border:1px solid #D3DCE5">
					<div
						style="background:none repeat scroll 0 0 #FAFDFE;border:1px solid #FFFFFF;overflow:hidden;padding:14px 0 9px 8px;">
						<div
							style="height:58px;width:58px;border:1px solid #CFCFCF;float:left;">
							<table cellspacing="0" cellpadding="0" border="0">
								<tbody>
									<tr>
										<td><img src="${cus.userFace}" id="faceimg"
											style="height: 58px;"></td>
									</tr>
								</tbody>
							</table>
						</div>
						<div style="margin-left:84px;width:123px;word-break:break-all;text-align:left;">
							<div
								style="height:22px;line-height:22px;margin:0;padding:0;color:black;font-size:14px;font-weight:700;font-family:inherit;">${username}</div>
						</div>
					</div>
				</div>
			</div>
			<div
				style="background:#F3F5FD;padding:2px;margin-bottom:9px;position:relative;zoom:1;width:220px;height:200px">
				<div style="border:1px #D3DCE5 solid">
					<div
						style="border:1px white solid;background:#FAFDFE;padding:14px 0 9px 8px;zoom:1;overflow:hidden">
						<ul style="padding:8px 14px 0 8px">
							<li>填写完整基本资料，可以让网友更便捷的找到你、认识你。</li>
							<li>为了增强你的帐号安全，同时也方便你在忘记密码时找回，建议你对注册时填写的邮箱进行安全验证。</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="lovecardivdialog">
		<form action="uploadLovecarPicAction.action" enctype="multipart/form-data"
			id="fileform" name="fileform" method="post" target="upload-target">
			爱车图片：<input type="file" name="upload"/>
			爱车品牌：<input type="text" name="lbrand" class="logintxt"/><br/>
			爱车姓名：<input type="text" class="logintxt" name="lname"/><br/>
			爱车年龄：<input type="text" class="logintxt" name="lage"/><br/>
			爱车身价：<input type="text"  class="logintxt" name="lprice"/><br/>
			爱车牌照：<input type="text" class="logintxt" name="lnumber"/><br/>
			爱车配置：<input type="text" class="logintxt" name="lconfiguration"/><br/>
			<input id="insertCarMsg" type="button" class="buttoncss" onclick="inserCar()"/><br/>
			<iframe id="upload-target" style="display:none" name="upload-target"></iframe>
		</form>
	</div>
	<jsp:include page="bottom.jsp"></jsp:include>
	<input type="hidden" value="${cus.userFace }" name="userface"/>
</body>
</html>
